<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>照片墙</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="js/jquery-3.4.1.min.js"></script>
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"
    integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>

  <link rel="stylesheet" href="css/otherstyle.css">
  <link rel="stylesheet" href="css/bg.css">
  <link rel="stylesheet" href="css/photo.css">
  <script src="js/other.js"></script>
  <script src="js/scrollReveal.js"></script>

</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light ">
      <a class="navbar-brand" href="index.html"><img src="images/logo.png" width="70%"></a>
      <button class="navbar-toggler type=" button data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nn navbar-nav mr-auto">

          <li class="nav-item">
            <a class="nav-link" href="zhekou.html">今日折扣</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">照片墙</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              菜单
            </a>
            <div class="dropdown-menu " aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">饮品</a>
              <a class="dropdown-item" href="#">糕点</a>
              <a class="dropdown-item" href="#">小吃</a>
            </div>
          </li>

        </ul>
        <form class="form-inline my-2 my-lg-0" action="reaservation.html">
          <button class="btn btn-outline-success my-2 my-sm-0">预约</button>
        </form>
      </div>
    </nav>

    <div id="d1">
      <div class="col-md-12 text-center">
        <span>Send Your Photos About Us</span>
        <h1>GET IN TOUCH</h1>
      </div>
    </div>
  </header>

  <section class="section6 container">
    <div class="h">
      <h1>Photo wall about us</h1>
    </div>
    <div class="row">
      <ul>
        <li class="col-sm-6 col-md-4">
          <div>
            <img data-scroll-reveal="enter bottom over 1s and move 100px" class="d1" src="images/33.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/2.jpg" alt="">
            <img data-scroll-reveal="enter top over 2s after 0.5s" class="d1" src="images/34.jpg" alt="">
            <img data-scroll-reveal="enter right after 0.5s" class="d1" src="images/4.jpg" alt="">
            <img data-scroll-reveal="enter left after 0.5s" class="d1" src="images/5.jpg" alt="">
            <img data-scroll-reveal="enter bottom after 0.5s" class="d1" src="images/6.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/7.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 1s and move 100px" class="d1" src="images/8.jpg" alt="">
            <img data-scroll-reveal="enter top over 2s after 0.5s" class="d1" src="images/9.jpg" alt="">
            <img data-scroll-reveal="enter right after 0.5s" class="d1" src="images/10.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 0.5s and move 200px" class="d1" src="images/11.jpg" alt="">
            <img data-scroll-reveal="enter top over 2s after 0.5s" class="d1" src="images/13.jpg" alt="">
            <img data-scroll-reveal="enter left over 2s after 0.5s" class="d1" src="images/12.jpg" alt="">
          </div>
        </li>
        <li class="col-sm-6 col-md-4">
          <div>
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/13.jpg" alt="">
            <img data-scroll-reveal="enter left over 1s and move 100px" class="d1" src="images/14.jpg" alt="">
            <img data-scroll-reveal="enter left over 2s after 0.5s" class="d1" src="images/15.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/16.jpg" alt="">
            <img data-scroll-reveal="enter right after 0.5s" class="d1" src="images/17.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 1s and move 100px" class="d1" src="images/18.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 0.5s and move 200px" class="d1" src="images/19.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/20.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 1s and move 100px" class="d1" src="images/21.jpg" alt="">
            <img data-scroll-reveal="enter right after 0.5s" class="d1" src="images/22.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/23.jpg" alt="">
            <img data-scroll-reveal="enter right over 2s after 0.5s" class="d1" src="images/34.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 2s after 0.5s" class="d1" src="images/24.jpg" alt="">

          </div>
        </li>
        <li class="col-sm-12 col-md-4">
          <div>
            <img data-scroll-reveal="enter right over 1s and move 100px" class="d1" src="images/25.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/1.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 1s and move 100px" class="d1" src="images/27.jpg" alt="">
            <img data-scroll-reveal="enter right after 0.5s" class="d1" src="images/28.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/29.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 0.5s and move 200px" class="d1" src="images/30.jpg" alt="">
            <img data-scroll-reveal="enter top over 2s after 0.5s" class="d1" src="images/31.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 1s and move 100px" class="d1" src="images/32.jpg" alt="">
            <img data-scroll-reveal="enter right after 0.5s" class="d1" src="images/33.jpg" alt="">
            <img data-scroll-reveal="enter top over 0.5s and move 200px" class="d1" src="images/35.jpg" alt="">
            <img data-scroll-reveal="enter left over 0.5s and move 200px" class="d1" src="images/16.jpg" alt="">
            <img data-scroll-reveal="enter top over 2s after 0.5s" class="d1" src="images/13.jpg" alt="">
            <img data-scroll-reveal="enter bottom over 2s after 0.5s" class="d1" src="images/15.jpg" alt="">

          </div>
        </li>
      </ul>
    </div>
  </section>
  


  <script>
    $(function () {
      window.scrollReveal = new scrollReveal({
        reset: true,
        move: '50px'
      });
    });
  </script>
</body>

</html>